
if ( typeof Skt.UsersSidebar === 'undefined' )
	Skt.UsersSidebar = {};


Skt.UsersSidebar.setup = function(sketchpad) {
	sketchpad.on("groupsUpdated", Skt.UsersSidebar.handleGroupsUpdated, Skt.UsersSidebar);
	
	Skt.UsersSidebar.setupUsersSidebar(sketchpad);
	Skt.UsersSidebar.bindCreateGroupButtons(sketchpad);
	Skt.UsersSidebar.updateGroups(sketchpad);
};

Skt.UsersSidebar.handleGroupsUpdated = function(params) {
	setTimeout(function(){
		Skt.UsersSidebar.updateGroups(Skt.sketchpad);
	}, 100);
};

Skt.UsersSidebar.updateGroups = function(sketchpad) {
	var user = sketchpad.getUser();
	var groupsManager = sketchpad.getGroupsManager();
	var workGroups = groupsManager.getWorkGroups();
	var notesGroups = groupsManager.getNoteGroups();
	
	if ( workGroups.length > 0 ) {
		var html = "";
		for ( var i = 0; i < workGroups.length; ++i )
			html += Skt.UsersSidebar.buildGroupHtml(workGroups[i]);
		$("#work-groups-list").html(html);
	} else {
		$("#work-groups-list").html("No groups created");
	}	
	
	if ( notesGroups.length > 0 ) {
		var html = "";
		for ( var i = 0; i < notesGroups.length; ++i ) {
			if ( notesGroups[i].isMember(user.id) )
				html += Skt.UsersSidebar.buildGroupHtml(notesGroups[i]);
		}
		$("#notes-groups-list").html(html);
	} else {
		$("#notes-groups-list").html("No groups created");
	}
	
	Skt.Groups.setupDropStudents(sketchpad);
};

Skt.UsersSidebar.buildGroupHtml = function(group) {
	var usersManager = Skt.sketchpad.getUsersManager();
	var members = group.getMembers();
	
	var res = '<div';
	res += ' id="group-' + group.getId();
	res += '" data-id="' + group.getId();
	res += '" class="group">';
	res += '<div class="group-header ui-corner-top">';
	res += group.getName();
	res += '</div>';
	res += '<ul class="group-body ui-corner-bottom">';
	
	for ( var i = 0; i < members.length; ++i ) {
		var user = usersManager.getUser(members[i]);
		if ( user != null && user.name != null )
			res += ('<li>' + user.name + ' ' + user.lastname + '</li>');
	}
	
	res += '</ul>';
	res += '</div>';
	
	return res;
};

Skt.UsersSidebar.bindCreateGroupButtons = function(sketchpad) {
	$("#add-work-group-btn").click(function() {
		Skt.UsersSidebar.showCreateGroupDialog(sketchpad, Skt.GroupType.WORK);
	});
	
	$("#add-notes-group-btn").click(function() {
		Skt.UsersSidebar.showCreateGroupDialog(sketchpad, Skt.GroupType.NOTES);
	});
};

Skt.UsersSidebar.showCreateGroupDialog = function(sketchpad, type) {
	var jMsg = $('<div><input id="group-name-input" type="text" required="true"/></div>');  
    
    BootstrapDialog.show({
        title: 'Insert a name for the new group',
        message: jMsg,
        buttons: [{
            label: 'Ok',
            action: function(dialogRef) {
            	var name = $("#group-name-input").val();
            	if ( name != null && name != "" ) {
            		Skt.Util.postGroupCreation(sketchpad, name, type);
                    dialogRef.close();
            	} else {
            		dialogRef.setType(BootstrapDialog.TYPE_DANGER);
            	}
            }
        }, {
            label: 'Cancel',
            action: function(dialogRef) {
            	$("#group-name-input").val("");
                dialogRef.close();
            }
        }]
    });
};

Skt.UsersSidebar.setupUsersSidebar = function(sketchpad) {
	
	$('#users-sidebar').tabSlideOut({
		tabHandle: '#users-sidebar-handle',  //class of the element that will become your tab
		pathToTabImage: sketchpad.getBasePath() + '/resources/images/tab-users.png',    //path to the image for the tab //Optionally can be set using css
		imageHeight: '152px',                     //height of tab image           //Optionally can be set using css
		imageWidth: '27px',                       //width of tab image            //Optionally can be set using css
		tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
		speed: 300,                               //speed of animation
		action: 'click',                          //options: 'click' or 'hover', action to trigger animation
		topPos: '0px',                          //position from the top/ use if tabLocation is left or right
		leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
		minSize: 295,                           //ancho minimo del sidebar en px
		fixedPosition: true                      //options: true makes it stick(fixed position) on scroll
    });
	
	
	$("#users-sidebar-body-groups").each(function() {
		$(this)
		.addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
		.find("h3")
		.addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
		.hover(function() { $(this).toggleClass("ui-state-hover"); })
		.click( function() {
			$(this).toggleClass("ui-state-active ui-corner-bottom")
				.find("> .ui-icon")
				.end()
				.next()
					.slideToggle();
			return false;
		})
		.next()
			.addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
			.hide();
	});
	
};

